<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { asyncranking, selectteamrole } from '../../../api';
import { Storekey } from '../../../interface';

const defaultYear = new Date("2000")
const yearMs = 1000 * 60 * 60 * 24 * 365

const props = defineProps<{ ID: number }>()
const router = useRouter()
const tableData = ref<{ ID?: number, name?: string, ACcount?: number, df?: number, headportrait?: string }[]>([])
const store = useStore(Storekey)
const getteam = computed(() => {
    return store.state.team?.rows || []
})
const getuser = computed(() => {
    return store.state.user
})
const isAdmin = computed(() => {
    return getuser.value?.isAdmin
})
// 获取权限
const roleName = "学生"
const routerNames = ref<any[]>([])
async function getPermissionsCfg() {
    const { count, rows } = await selectteamrole({
        teamid: getuser.value.teamid, name: roleName
    })
    // 可能存在多条
    routerNames.value = rows[0]?.routername || []
}

onMounted(() => {
    start()
    getPermissionsCfg()
})

async function start() {
    const payload = {
        questionbankid: props.ID,
        teamid: getteam.value[0]?.ID,
        // 一年内
        // formdate: Date.now() - yearMs,
        formdate: defaultYear,
        todate: new Date()
    }
    try {
        const ret = await asyncranking(payload)
        tableData.value = ret.ACrank.sort((a, b) => (b.count || 0) - (a.count || 0)).map(e => {
            const user = ret.user.find(v => v.ID === e.userid)
            return {
                ...user,
                ACcount: e.count || 0,
                df: Math.floor(Number(e.resultdataarrlength) / Number(e.resultdataarraclength) * 100),
                ...e
            }
        })
    } catch (error) {
        console.error("asyncranking error=>", error)
    }
}

function rowClick(row: any, column: any,) {

    const formdata = {
        questionbankid: props.ID,
        userid: row.userid,
    }
    // 跳转评测界面 传入用户和题单号
    if (isAdmin.value || routerNames.value.find(e => e === '评测')) {
        router.push({ name: "评测", query: formdata });
    }
}

</script>

<template>
    <div class="aside-container-box">
        <div class="icon-text text-title">
            <el-icon class="text-primary font-size14">
                <List />
            </el-icon>
            <b class="font-size14">排行榜(代码题)</b>
        </div>
        <el-table row-class-name="cursor-pointer" @row-click="rowClick" :data="tableData" stripe empty-text="目前没有数据">
            <template v-slot:empty>
                <el-empty image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png" />
            </template>
            <el-table-column width="" prop="name" label="昵称" show-overflow-tooltip>
                <template #default="{ row, column }">
                    <img :src="row.headportrait" class="rounded-circle" width="30" />
                    {{ row.name }}
                </template>
            </el-table-column>
            <el-table-column width="90" prop="ACcount" label="AC数" sortable></el-table-column>
        </el-table>
    </div>
    <!-- </el-scrollbar> -->
</template>

<style scoped></style>